<template>
  <div ref="myChart" :style="chartStyle"></div>
</template>

<script>
export default {
  props: {
    chartStyle: {
      default: () => {},
    },
    // data: {
    //   default: () => {
    //     return [
    //       { value: [0, 0, 0], label: "设备1" },
    //       { value: [0, 1, 0], label: "设备2" },
    //       { value: [0, 2, 1], label: "设备3" },
    //     ];
    //   },
    // },
    data: {
      default: () => {
        return [
          // { status: "0", label: "设备1" },
          // { status: "1", label: "设备2" },
          // { status: "2", label: "设备3" },
        ];
      },
    },
  },
  data() {
    return {
      pieces: [
        // { value: "3", label: "报废", color: "#ccc" },
        { value: "2", label: "检维修", color: "#efe241" },
        { value: "1", label: "停用", color: "#f34e29" },
        { value: "0", label: "启用", color: "green" },
      ],
      sideCount: 2,
    };
  },
  computed: {
    heatData() {
      return this.setChartData(this.sideCount,this.data).heatData;
    },
    sideCountArr() {
      return this.setChartData(this.sideCount,this.data).sideCountArr;
    },
  },
  watch: {
    data: {
      handler(data) {
        if (data.length === 0) return;
        this.initChartOption();
        this.sideCount = Math.sqrt(this.data.length);
      },
      deep: true,
    },
  },
  mounted() {
    this.handleSetChart();
    this.sideCount = Math.sqrt(this.data.length);
    this.handleSetChart();
    window.onresize = () => {
      this.handleResize();
    };
  },
  methods: {
    handleSetChart() {
      this.myChart = this.echarts.init(this.$el);
      this.initChartOption();
    },
    handleResize() {
      this.myChart.resize();
    },
    initChartOption() {
      let option = {
        tooltip: {},
        xAxis: {
          type: "category",
          data: this.sideCountArr,
        },
        yAxis: {
          type: "category",
          data: this.sideCountArr,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          // 自定义tooltip
          formatter: (item) => {
            return this.formatterTooltip(item);
          },
        },
        visualMap: {
          type: "piecewise",
          left: "center",
          top: 10,
          orient: "horizontal",
          //特定数据有相对应的数据
          pieces: this.pieces,
        },
        series: [
          {
            name: "设备",
            type: "heatmap",
            label: {
              show: true,
              color:'#222',
              // 自定义 显示文本
              formatter: (params) => {
                const { label } = params.data;
                return label && label.length > 5 ? (label.slice(0,5)+'...'):label;
              },
            },
            data: this.heatData,
            emphasis: {
              itemStyle: {
                borderColor: "#333",
                borderWidth: 1,
              },
            },
            progressive: 1000,
            animation: false,
          },
        ],
      };
      this.myChart.setOption(option);
    },
    changeLabel(value) {
      switch (value) {
        case 0:
          return "启用";
        case 1:
          return "停用";
        case 2:
          return "检维修";
        // case 3:
        //   return "报废";  //报废的不体现
        default:
          return "启用";
      }
    },
    formatterTooltip(item) {
      let res = item[0].name + ":<br/>";
      item.forEach((element, index) => {
        if (element.value === "-") element.value = 0;
        res +=
          element.marker +
          element.data.label +
          " : " +
          this.changeLabel(element.value[2]) +
          "<br />";
      });
      return res;
    },
    setChartData(count, data) {
      let sideCountArr = [];
      let heatData = [];
      let index = 0;
      for (let i = 0; i <= count; i++) {
        sideCountArr.push(i);
        for (let j = 0; j <= count; j++) {
          let current = data[index];
          current && heatData.push({
            value: [i,j,Number(current.status)],
            label: current.label,
          });
          index++;
        }
      }
      return { sideCountArr, heatData };
    },
  },
};
</script>
<style scoped lang="scss"></style>
